<!DOCTYPE html>
<html>

<head>
    <title>登录后创建会议</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../../static/orderscreate/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../static/orderscreate/css/fileinput.min.css" rel="stylesheet">
    <link href="../../static/orderscreate/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../../static/orderscreate/css/font-awesome.4.6.0.css">
    <link href="../../static/orderscreate/form_builder/animate.min.css" rel="stylesheet">
    <link href="../../static/orderscreate/form_builder/summernote.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="../../static/jqueryjsPlumb/css/jquery-ui.min.css">
    <link rel="stylesheet" type="text/css" href="../../static/jqueryjsPlumb/css/style.css">

    <link href="../../static/orderscreate/form_builder/style.min862f.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../../static/orderscreate/css/index.css">
    <script src="../../static/system_setup/creat_from/js/jquery-1.10.2.js"></script>
    <script src="../../static/orderscreate/javascript/bootstrap.min.js"></script>
    <script src="../../static/orderscreate/javascript/fileinput.min.js"></script>
    <script src="../../static/orderscreate/javascript/bootstrap-datetimepicker.min.js"></script>
    <script src="../../static/orderscreate/javascript/distpicker.data.min.js"></script>
    <script src="../../static/orderscreate/javascript/distpicker.min.js"></script>
    <script src="../../static/orderscreate/javascript/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="../../static/orderscreate/javascript/zh.js"></script>
    <script src="../../static/orderscreate/javascript/jquery-ui.min.js"></script>
    <script src="../../static/orderscreate/form_builder/beautifyhtml.js"></script>
    <script src="../../static/orderscreate/javascript/index.js"></script>
    <link rel="stylesheet" href="../../static/public_file/css/PersonnelChooser.css">
    <link rel="stylesheet" href="../../static/personal_center/font_2369197_oqktwkt71s/iconfont.css" media="screen">
    <link rel="stylesheet" href="../../static/public_file/css/DepartmentSelectionAdmin.css">
    <link rel="stylesheet" href="../../static/public_file/css/ProcessAdmin.css">

    <style>
        html, body {
            margin: 0;padding: 0;width: 100%;height: 100%;
        }
        table {
            border-collapse: collapse;
        }
        .form-flow {
            display: inline-block;width: 100px;vertical-align: top;text-align: center;font-size: 14px;cursor: pointer;
        }
        .form-flow-add-color {
            border-bottom: #00a0e9 solid 1px;color: #00a0e9;
        }
        .li-class {
            list-style: none;margin-top: 2%;color: #0b0b0b;cursor: pointer;
        }
        tr {
            height: 35px;
        }
        th {
            text-align: center;
        }
        ul, li {
            list-style: none;
        }
        :focus {
            outline: none;
        }
        input[type=text] {
            border: 1px solid #ccc;
        }
        input[type=text]:hover, input[type=text]:focus {
            border-color: #57bc80;box-shadow: none;
        }
        .file {
            position: relative;display: inline-block;background: #D0EEFF;border: 1px solid #99D3F5;border-radius: 4px;padding: 4px 12px;overflow: hidden;color: #1E88C7;text-decoration: none;text-indent: 0;line-height: 20px;
        }
        .file input {
            position: absolute;font-size: 100px;right: 0;top: 0;opacity: 0;
        }
        .file:hover {
            background: #AADFFD;border-color: #78C3F3;color: #004974;text-decoration: none;
        }
        .my-select-box {
            position: relative;
        }
        .my-select-box .my-select-input {
            height: 24px;line-height: 24px;padding: 0 5px;background: url() right center no-repeat;padding-right: 20px !important;width: 100%;box-sizing: border-box;
        }
        .my-select-box .my-select-list {
            position: absolute;left: 0;z-index: 101;border: 1px solid #ccc;border-top: none;max-height: 120px;overflow-y: auto;display: none;background: #fff;width: 100%;box-sizing: border-box;
        }
        .my-select-box .my-select-list li {
            height: 22px;line-height: 22px;padding: 0 3px;cursor: pointer;margin-bottom: 1px
        }
        .my-select-box .my-select-list li.choosed {
            background: #ccc;color: #fff;
        }
        .my-select-box .my-select-list li:hover {
            background: #ccc;color: #fff;
        }
        #addForm1 {
            width: 800px;height: 620px;background: #F5F5F5;position: absolute;border: #dfdfdf solid 1px;margin: auto;border-radius: 3px;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 10100;
        }
        #title {
            display: flex;justify-content: space-between;box-sizing: border-box;padding: 0 10px;height: 50px;color: #0b0b0b;cursor: move;width: 100%;background: #f4f7fa;border-top-left-radius: 5px;border-top-right-radius: 5px;
        }
        .label_title {
            width: 15%;height: 35px;line-height: 35px;padding-right: 1%;border: #CCCCCC solid 0.5px;text-align: right;
        }
        .label_title1 {
            width: 15%;height: 35px;line-height: 35px;padding-right: 1%;border: #CCCCCC solid 0.5px;text-align: right;
        }
        .label_value {
            width: 35%;height: 35px;line-height: 35px;border: #CCCCCC solid 0.5px;
        }
        .label_value1 {
            width: 35%;height: 35px;line-height: 35px;border: #CCCCCC solid 0.5px;
        }
        .wrap-td{
            display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;word-break: break-all;text-overflow: ellipsis;
        }
        #addForm {
            width: 800px;height: 620px;background: #F5F5F5;position: absolute;border: #dfdfdf solid 1px;margin: auto;border-radius: 3px;top: 50%;left: 50%;transform: translate(-50%, -50%);display: none;z-index: 10100;font-size: 0;
        }
        #title3 {
            display: flex;justify-content: space-between;box-sizing: border-box;padding: 0 10px;height: 50px;color: #0b0b0b;cursor: move;width: 100%;background: #f4f7fa;border-top-left-radius: 5px;border-top-right-radius: 5px;
        }
        .search3 {
            width: 300px;display: flex;float: right;margin: 10px 0;margin-right: 1%;
        }

        .search3 input {
            vertical-align: middle;float: left;flex: 4;height: 30px;width: 230px;outline: none;border: 1px solid #0070c1;box-sizing: border-box;border-bottom-left-radius: 3px;border-top-left-radius: 3px;
        }
        .search3 button {
            float: right;flex: 1;height: 30px;width: 70px;line-height: 30px;background-color: #0070c1;color: white;border-style: none;outline: none;border-bottom-right-radius: 3px;border-top-right-radius: 3px;
        }
        .search3 button i {
            font-style: normal;
        }
        .search3 button:hover {
            font-size: 16px;
        }
        .li-class {
            list-style: none;margin-top: 2%;color: #0b0b0b;cursor: pointer;height: 30px;line-height: 30px;
        }
        #ThreeNavigation div {
            padding-left: 2%;
        }
    </style>
</head>

<body style="background-color:#f7f5f6;padding: 0;">
<div style="width: 100%;height: 40px;line-height: 40px;border-bottom: #cfcfcf solid 1px;">
    <div id="form-tab" onclick="label_switching('form_design', 'flow_design', 'form-tab', 'flow-tab')" class="form-flow form-flow-add-color">
        表单设计
    </div>
    <div id="flow-tab" onclick="label_switching('flow_design', 'form_design', 'flow-tab', 'form-tab')" class="form-flow">
        流程设计
    </div>
    <button type="submit" class="btn1" data-clipboard-text="testing" id="pop_page" style="float: right;height: 30px;margin-top: 5px;margin-right: 10px;background: #00a0e9;color: white;line-height: 10px;width: 70px;border: #00a0e9 solid 1px;border-radius: 3px">保存
    </button>
</div>
<div id="new_models_1" class="shade">
    <div id="addForm1" style="width: 400px;height: 200px;background: white;z-index: 10100;position: absolute;top: 45%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #cfcfcf solid 1px;">
        <div id="title" style="font-size: 20px; width: auto;text-align: right; border-bottom: #cfcfcf solid 1px;height: 30px;">
            <span style="cursor: pointer; margin-right: 8px" id="close_page" onclick="close_page()">×</span>
        </div>

        <div style="width: 100%;height: 120px;border-bottom: #cfcfcf solid 1px;">
            <div style="width: 100%;padding-left: 20px;margin-top: 10px;">
                <label for="">选择模块：</label>
                <div style="width:70%;display: inline-block;height: 35px;line-height: 35px;">
                    <div class="my-select-box">
                        <input type="text" class="my-select-input" placeholder="选择或自定义流程管理" maxlength="20" id="process_model" style="border-radius: 3px;height: 30px;" autocomplete="off">
                        <ul class="my-select-list">
                            {% for obj in objs %}
                                <li data-value="{{ obj.name }}">{{ obj.name }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
            <div style="width: 100%;padding-left: 20px;margin-top: 10px;">
                <label for="">流程名称：</label>
                <div style="width:70%;display: inline-block;height: 35px;line-height: 35px;">
                    <input type="text" id="process_name" placeholder="在此输入流程名称" style="height: 30px;border-radius: 3px; width: 100%;padding-left: 5px;" maxlength="20" autocomplete="off">
                </div>
            </div>
        </div>

        <div style="text-align: right;height: 40px;">
            <button type="submit" class="btn1" data-clipboard-text="testing" id="copy-to-clipboard"
                    style="height: 24px;margin-top: 8px;margin-right: 10px;background: #00a0e9;color: white;line-height: 10px;width: 70px;border: #00a0e9 solid 1px;border-radius: 3px">
                提交
            </button><!-- btn btn-warning, btn1-->
        </div>
    </div>
</div>

<div id="staff-select" class="shade">
    <div id="staff-model" style="width: 100%;height: 100%;position: absolute;">
        <div style="width: 900px;height: 500px;background: #F5F5F5;z-index: 10000;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #dfdfdf solid 1px;">
            <div id="staff-box" style="width: 100%;height: 40px;background: #f4f7fa;cursor: move;border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom: #dfdfdf solid 1px;">
                <div style="width: 20%;margin-left: 1%;display: inline-block;line-height: 40px;font-size: 14px;">
                    选择人员
                </div>
                <span onclick="close_model()" style="float: right;padding-right: 2%;cursor: pointer;line-height: 40px;">
                    <i class="iconfont icon-quchu"></i>
                </span>
            </div>
            <div style="height: 460px;width: 100%;border-bottom: #dfdfdf solid 1px;">
                <div style="width: 70px;height: 100%;border-right: #cfcfcf solid 1px;display: inline-block;vertical-align: top;">
                    <div id="dep" class="navigation navigation_color" onclick="change_navigation(this)">部门</div>
                    <div id="limits" class="navigation" onclick="change_navigation(this)">权限</div>
                    <div id="fun" class="navigation" onclick="change_navigation(this)">职能</div>
                </div>
                <div style="width: 200px;height: 100%;border-right: #cfcfcf solid 1px;display: inline-block;vertical-align: top;">
                    <div style="width: 100%;height: 50px;line-height: 50px;">
                        <input id="SearchDep" onkeydown="SearchDepartment()" class="search_input" type="text" placeholder="搜索" autocomplete="off" style="width: 90%;">
                    </div>
                    <div id="SecondaryNavigation" style="width: 100%;height: 410px;line-height: 50px;overflow: auto;">
                        {% for company in company_list %}
                            <div {% if company.flag == 'true' %} class="company_class company_color" {% else %} class="company_class" {% endif %} id="{{ company.id }}" title="{{ company.name }}" onclick="choose_dep(this)">&nbsp;&nbsp;&nbsp;{{ company.name }}</div>
                        {% endfor %}
                    </div>
                </div>
                <div style="width: 200px;height: 100%;border-right: #cfcfcf solid 1px;display: inline-block;vertical-align: top;">
                    <div style="width: 100%;height: 50px;line-height: 50px;">
                        <input type="checkbox" id="select-all" onclick="SelectAll(this)">
                        <input id="SearchPeo" onkeydown="SearchProple()" class="search_input" type="text" placeholder="搜索" autocomplete="off" style="width: 90%;">
                    </div>
                    <div id="ThreeNavigation" style="width: 100%;height: 410px;line-height: 50px;overflow: auto;">
                        {% for peo in people_list %}
                            <div class="personnel_class" onclick="fa_click(this)" id="{{ peo.id }}-{{ peo.job_number }}" title="{{ peo.real_name }}({{ peo.job_number }})">
                                <input type="checkbox" class="choose_person" onclick="son_click(this)" id="select-{{ peo.job_number }}" title="{{ peo.real_name }}({{ peo.job_number }})">&nbsp;&nbsp;&nbsp;{{ peo.real_name }}({{ peo.job_number }})
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <div style="width: 360px;height: 100%;display: inline-block;vertical-align: top;overflow: auto">
                    <div id="selected-number" style="width: 100%;height: 40px;text-align: left;font-size: 14px;line-height: 40px;">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;已选0人
                    </div>
                    <div id="selected-div" style="width: 100%;font-size: 14px;height: 370px;overflow: auto;">

                    </div>
                    <div style="width: 100%;font-size: 14px;height: 40px;text-align: center;">
                        <button id="finish_with" style="width: 100px;height: 30px;line-height: 25px;text-align: center;letter-spacing: 5px;border-radius: 3px;border: #cfcfcf solid 1px;font-size: 14px;cursor: pointer;margin-top: 10px;">完成</button>
                        <button onclick="close_model()" style="margin-left: 15px;width: 100px;height: 30px;line-height: 25px;text-align: center;color: #0abb78;letter-spacing: 5px;border-radius: 3px;font-size: 14px;border: #cfcfcf solid 1px;cursor: pointer;margin-top: 10px;">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="form_design" class="container-fluid" style="padding:0; margin:0;width: 100%;height: 94%;background: white;">
    <div style="width: 100%;height: 100%;">
        <div id="FormCode" style="width: 75%;height: 100%;display: inline-block;vertical-align: top;border-right: #CCCCCC solid 1px;overflow: auto;">
            <div id="create_table" style="width: 90%;margin-left: 5%;height: 100%;padding-top: 20px;">
                <table id="table_name" style="width: 100%;">
                    <tr style="width: 100%;">
                        <th colspan="4" style="letter-spacing:1px;height: 35px;line-height: 35px;text-align: center;border: #CCCCCC solid 0.5px;font-size: 18px;" contenteditable="true">
                            表单名称
                        </th>
                    </tr>
                </table>
                <div id="table_essential" style="width: 100%;"></div>

                <table id="table_detail" style="width: 100%;">
                </table>
            </div>
        </div>
        <div style="width: 22%;height: 100%;display: inline-block;vertical-align: top;padding-top: 3%;">
            <div style="width: 100%;height: 35px;line-height: 35px;padding-left: 10px;cursor: pointer;margin-left: 20px;">
                <button style="width: 100px;height: 35px;line-height: 35px;text-align: center;border-radius: 3px;background: #0d8ddb;border: #0d8ddb solid 0.5px;color: white;" onclick="create_multiseriate()">多&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;列</button>
                <button style="width: 100px;height: 35px;line-height: 35px;text-align: center;border-radius: 3px;background: #0d8ddb;border: #0d8ddb solid 0.5px;color: white;margin-left: 15px;" onclick="create_single()">单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;列</button>
            </div>
            <div style="width: 100%;height: 35px;line-height: 35px;padding-left: 10px;cursor: pointer;margin-left: 20px;margin-top: 20px;">
                <button style="width: 100px;height: 35px;line-height: 35px;text-align: center;border-radius: 3px;background: #0d8ddb;border: #0d8ddb solid 0.5px;color: white;" onclick="create_appendix()">附&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;件</button>
                <button style="width: 100px;height: 35px;line-height: 35px;text-align: center;border-radius: 3px;background: #0d8ddb;border: #0d8ddb solid 0.5px;color: white;margin-left: 15px;" onclick="CreateMultilineText()">多行文本</button>
            </div>

            <div style="width: 100%;height: 35px;line-height: 35px;padding-left: 10px;cursor: pointer;margin-left: 20px;margin-top: 20px;">
                <button style="width: 100px;height: 35px;line-height: 35px;text-align: center;border-radius: 3px;background: #0d8ddb;border: #0d8ddb solid 0.5px;color: white;" onclick="inblock_select()">下拉框</button>
                <button style="width: 100px;height: 35px;line-height: 35px;text-align: center;border-radius: 3px;background: #0d8ddb;border: #0d8ddb solid 0.5px;color: white;margin-left: 15px;" onclick="inblock_checked()">复选框</button>
            </div>

            <div style="width: 100%;height: 35px;line-height: 35px;padding-left: 10px;cursor: pointer;margin-left: 20px;margin-top: 20px;">
                <button style="width: 100px;height: 35px;line-height: 35px;text-align: center;border-radius: 3px;background: #0d8ddb;border: #0d8ddb solid 0.5px;color: white;" onclick="MultiColumnTimeSelector()">多列时间选择器</button>
                <button style="width: 100px;height: 35px;line-height: 35px;text-align: center;border-radius: 3px;background: #0d8ddb;border: #0d8ddb solid 0.5px;color: white;margin-left: 15px;" onclick="SingleColumnTimeSelector()">单列时间选择器</button>
            </div>

            <div style="width: 100%;height: 35px;line-height: 35px;padding-left: 10px;cursor: pointer;margin-left: 20px;margin-top: 20px;">
                <button style="width: 100px;height: 35px;line-height: 35px;text-align: center;border-radius: 3px;background: #0d8ddb;border: #0d8ddb solid 0.5px;color: white;" onclick="department_selection()">科室选择器</button>
                <button style="width: 100px;height: 35px;line-height: 35px;text-align: center;border-radius: 3px;background: #0d8ddb;border: #0d8ddb solid 0.5px;color: white;margin-left: 15px;" onclick="personnel_selection()">人员选择器</button>
            </div>

            <div style="width: 100%;border-top: #CCCCCC solid 1px;margin-top: 5%;margin-bottom: 5%;"></div>

            <div style="width: 100%;height: 35px;line-height: 35px;padding-left: 10px;cursor: pointer;margin-left: 20px;margin-top: 20px;">
                <button style="width: 100px;height: 35px;line-height: 35px;text-align: center;border-radius: 3px;background: #0d8ddb;border: #0d8ddb solid 0.5px;color: white;" onclick="create_essential()">基本信息</button>
                <button style="width: 100px;height: 35px;line-height: 35px;text-align: center;border-radius: 3px;background: #0d8ddb;border: #0d8ddb solid 0.5px;color: white;margin-left: 15px;" onclick="create_Division()">分割线</button>
            </div>

            <div id="select_setting" style="display: none;">
                <div style="width: 100%;border-top: #CCCCCC solid 1px;margin-top: 5%;margin-bottom: 5%;"></div>

                <div style="width: 100%;">
                    <div style="width: 100%;">
                        <div style="display: inline-block;width: 31%;text-align: right;vertical-align: top;height: 30px;line-height: 30px;">下拉框选项：</div>
                        <div id="select_count" style="display: inline-block;width: 67%;vertical-align: top;max-height: 200px;overflow: auto;">
                            <input type="text" name="select-input" style="width: 100%;height: 30px;border: #cfcfcf solid 1px;border-radius: 3px;padding-left: 2px;">
                        </div>
                    </div>
                    <div style="width: 100%;text-align: center;margin-top: 10px;">
{#                        <select name="" id="">#}
{#                            #}
{#                        </select>#}
                        <button style="width: 100px;height: 30px;background: #2db7f5;border: #2db7f5 solid 1px;border-radius: 3px;" onclick="add_select_tag()">添&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;加</button>
                        <button style="width: 100px;height: 30px;background: #2db7f5;border: #2db7f5 solid 1px;border-radius: 3px;margin-left: 30px;color: white;" onclick="create_select_label()">确&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;认</button>
                    </div>
                </div>
            </div>

            <div id="checked_setting" style="display: none;">
                <div style="width: 100%;border-top: #CCCCCC solid 1px;margin-top: 5%;margin-bottom: 5%;"></div>

                <div style="width: 100%;">
                    <div style="width: 100%;">
                        <div style="display: inline-block;width: 31%;text-align: right;vertical-align: top;height: 30px;line-height: 30px;">复选框选项：</div>
                        <div id="checked_count" style="display: inline-block;width: 67%;vertical-align: top;max-height: 200px;overflow: auto;">
                            <input type="text" name="checked-input" style="width: 100%;height: 30px;border: #cfcfcf solid 1px;border-radius: 3px;padding-left: 2px;">
                        </div>
                    </div>
                    <div style="width: 100%;text-align: center;margin-top: 10px;">
                        <button style="width: 100px;height: 30px;background: #2db7f5;border: #2db7f5 solid 1px;border-radius: 3px;" onclick="add_checked_tag()">添&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;加</button>
                        <button style="width: 100px;height: 30px;background: #2db7f5;border: #2db7f5 solid 1px;border-radius: 3px;margin-left: 30px;color: white;" onclick="create_checked_label()">确&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;认</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="flow_design" class="container-fluid" style="padding:0; margin:0;display: none;">
    <div class="row-fluid clearfix">
        <div class="col-md-12 column">
            <div style="width:1080px; margin:0 auto; margin-top:20px;">
                <div class="conference-cont" style="height: 640px;">
                    <div class="wrapper wrapper-content">
                        <div class="row"
                             style="border-left: 2px dashed rgba(0,0,0,0.12);border-right: 2px dashed rgba(0,0,0,0.12);border-bottom: 2px dashed rgba(0,0,0,0.12);">

                            <div class="container device" style="width: 75%;padding: 0;margin: 0;">
                                <div class="deviceLeft" style="width: 220px;margin-left: 5px;height: 600px;">
                                    <h3>配置1</h3>
                                    <div class="deviceLeft_box">
                                        <div class="node node1css" data-type="server">开始</div>
                                    </div>
                                    <h3>配置2</h3>
                                    <div class="deviceLeft_box">
                                        <div class="node node4css" data-type="route">双击选择</div>
                                    </div>
                                    <h3>配置3</h3>
                                    <div class="deviceLeft_box">
                                        <div class="node node5css" data-type="signal">结束</div>
                                    </div>
                                </div>
                                <div id="deviceRight" style="height: 600px;">
                                    <!--                                        <button class="btn1" id="save_data"> 保存 </button>-->
                                    <div id="main">
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="selection-office" class="office-shade">
        <div id="office-model">
            <!-- 标题 -->
            <div id="office-title">
                <h5 style="line-height: 40px;width: 15%;margin-left: 1%;display: inline-block;font-size: 14px;">选择科室</h5>
                <span onclick="close_office_models()" style="float: right;line-height: 50px;padding-right: 2%;cursor: pointer;"><i class="iconfont icon-quchu"></i></span>
            </div>
            <div style="width: 55%;height: 350px;vertical-align: top;left: 0;display: inline-block;border-right: #cfcfcf solid 1px;">
                <div style="width: 100%;height: 50px;line-height: 50px;padding-left: 2%;">
                    <input id="search_data1" onkeydown="search_dep()" class="search-input" type="text" placeholder="搜索" autocomplete="off">
                </div>
                <div id="processed" style="width: 100%;height: 300px;overflow: auto;">
                    {% for company in company_list %}
                        <div style="width: 100%;height: 30px;line-height: 30px;font-size: 14px;color: #0b0b0b;">
                            <input class="check_box1" id="dep-{{ company.id }}" type="checkbox" onclick="check_dep_ff('{{ company.name }}', '{{ company.id }}', false)"> {{ company.name }}
                        </div>
                    {% endfor %}
                </div>
            </div>

            <div style="width: 43%;height: 360px;vertical-align: top;left: 0;display: inline-block;">
                <div style="width: 100%;height: 50px;line-height: 50px;padding-left: 2%;font-size: 14px;">
                    已选择科室
                </div>
                <div id="processed_prople" style="width: 100%;height: 265px;overflow: auto;padding-left: 2%;">

                </div>
                <div style="width: 100%;height: 40px;text-align: center;">
                    <button id="SummitDepBut" style="border-radius: 2px;height: 30px;margin-top: 5px;border: #1E90FF solid 1px;background: #1E90FF;color: white;width: 80px;letter-spacing: 4px;font-size: 14px;">
                        提交
                    </button>
                    <button onclick="close_office_models()" style="border-radius: 2px;height: 30px;margin-top: 5px;border: #cfcfcf solid 1px;width: 80px;letter-spacing: 4px;margin-left: 15px;font-size: 14px;">
                        取消
                    </button>
                </div>
            </div>
        </div>
    </div>

<div id="process_select" class="shade">
    <div id="process-model" style="width: 100%;height: 100%;position: absolute;">
        <div style="width: 700px;height: 500px;background: #F5F5F5;z-index: 10000;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #dfdfdf solid 1px;">
            <div id="process-box" style="width: 100%;height: 40px;background: #f4f7fa;cursor: move;border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom: #dfdfdf solid 1px;">
                <div style="width: 20%;margin-left: 1%;display: inline-block;line-height: 40px;font-size: 14px;">
                    创建流程
                </div>
                <span onclick="close_process_model()" style="float: right;padding-right: 2%;cursor: pointer;line-height: 40px;">
                    <i class="iconfont icon-quchu"></i>
                </span>
            </div>
            <div style="height: 460px;width: 100%;border-bottom: #dfdfdf solid 1px;">
                <div style="width: 13%;height: 100%;vertical-align: top;border-right: #CCCCCC solid 1px;display: inline-block;">
                    <div name="left_navigation" onclick="choose_process(this, 1)" class="left_navigation left_navigation_active">基&nbsp;本&nbsp;节&nbsp;点</div>
                    <div name="left_navigation" onclick="choose_process(this, 2)" class="left_navigation">科室节点</div>
                    <div name="left_navigation" onclick="choose_process(this, 3)" class="left_navigation">科室分管院长</div>
                    <div name="left_navigation" onclick="choose_process(this, 4)" class="left_navigation">角色节点</div>
                </div>

                <div id="right_type_one" style="width: 80%;display: inline-block;vertical-align: top;padding: 20px;overflow: auto;height: 100%;">
                </div>

                <div id="right_type_two" style="width: 80%;vertical-align: top;padding: 20px;padding-top: 0;display: none;overflow: auto;height: 100%;">
                </div>

                <div id="right_type_three" style="width: 80%;vertical-align: top;padding: 20px;padding-top: 0;display: none;overflow: auto;height: 100%;">
                </div>

                <div id="right_type_four" style="width: 80%;vertical-align: top;padding: 20px;padding-top: 0;display: none;overflow: auto;height: 100%;">
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../static/jqueryjsPlumb/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../../static/jqueryjsPlumb/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../../static/jqueryjsPlumb/js/jquery.jsPlumb.min.js"></script>
<script type="text/javascript" src="../../static/jqueryjsPlumb/js/index.js"></script>
<script src="../../static/administrative/layDate-v5.0.9/laydate/laydate.js"></script> <!-- 改成你的路径 -->
<script src="../../static/public_file/js/PersonnelChoosersNew.js" type="text/javascript" charset="gb2312"></script>
<script type="text/javascript" src="../../static/public_file/js/DepartmentSelectionAdmin.js"></script>
<script type="text/javascript" src="../../static/public_file/js/ProcessAdmin.js"></script>
<script>
    function label_switching(tab_1, tab_2, id_1, id_2) {
        document.getElementById(id_1).className = 'form-flow form-flow-add-color';
        document.getElementById(id_2).className = 'form-flow';
        document.getElementById(tab_1).style.display = 'block';
        document.getElementById(tab_2).style.display = 'none';
    }


    function close_page() {
        document.getElementById('new_models_1').style.display = 'none'
    }


    function remove_time_adress(obj) {
        var trNode = $(obj).parent().parent();
        trNode.remove();
    }

    function create_multiseriate() {
        var table_label = document.getElementById("table_detail");
        var tr = document.createElement('tr');tr.style.width='100%';tr.style.position='relative';
        var td1 = document.createElement('td');td1.className='label_title';td1.contentEditable='true';td1.style.borderTop='none';
        var td2 = document.createElement('td');td2.className='label_value';td2.style.borderTop='none';
        var td3 = document.createElement('td');td3.className='label_title';td3.contentEditable='true';td3.style.borderTop='none';
        var td4 = document.createElement('td');td4.className='label_value';td4.style.borderTop='none';
        var span = document.createElement('div');span.innerHTML='<img onclick="remove_time_adress(this)" src="../../static/jqueryjsPlumb/images/remove.png" style="width: 20px;height: 20px;margin-left: 10px;margin-top: 7.5px;cursor: pointer;">';span.style.position='absolute';span.style.zIndex='100';
        span.className='remove_img';
        tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);tr.appendChild(td4);tr.appendChild(span);table_label.appendChild(tr);
    }

    function create_single() {
        var table_label = document.getElementById("table_detail");
        var tr = document.createElement('tr');tr.style.width='100%';tr.style.position='relative';
        var td1 = document.createElement('td');td1.className='label_title';td1.contentEditable='true';td1.style.borderTop='none';
        var td2 = document.createElement('td');td2.className='label_value';td2.style.width='85%';td2.colSpan='3';td2.style.borderTop='none';
        var span = document.createElement('div');span.innerHTML='<img onclick="remove_time_adress(this)" src="../../static/jqueryjsPlumb/images/remove.png" style="width: 20px;height: 20px;margin-left: 10px;margin-top: 7.5px;cursor: pointer;">';span.style.position='absolute';span.style.zIndex='100';
        span.className='remove_img';
        tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(span);table_label.appendChild(tr);
    }
    
    function create_appendix() {
        var table_label = document.getElementById("create_table");
        var party_main = document.createElement('table');party_main.style.width='100%';party_main.id='party_main';party_main.style.position='relative';
        var tr1 = document.createElement('tr');tr1.style.width='100%';tr1.style.background='#dfdfdf';tr1.style.color='#1E90FF';tr1.style.paddingLeft='1%';tr1.style.border='#cccccc solid 1px';tr1.style.borderTop='none';tr1.style.borderBottom='none';tr1.style.paddingRight='1%';
        var td1 = document.createElement('td');td1.style.paddingRight='1%';td1.style.paddingTop='2.5px';td1.colSpan='6';
        var p_tag = document.createElement('p');p_tag.style.paddingRight='1%';p_tag.style.display='inline-block';p_tag.style.verticalAlign='top';p_tag.style.marginTop='5px';p_tag.style.color='4F4F4F';p_tag.innerText='上传附件';
        var a_tag = document.createElement('a');a_tag.href='javascript:;';a_tag.className='file';a_tag.style.verticalAlign='top';a_tag.style.float='right';a_tag.style.marginBottom='2.5px';
        a_tag.innerHTML = `上传文件 <input type="file" name="party_main_body" id="party_main_body" onchange="upload_accessory('file1', 'party_main', 'party_main_body')">`

        var tr2 = document.createElement('tr');tr2.style.width='100%';
        var td2 = document.createElement('td');td2.style.width='5%';td2.style.border='#cccccc solid 1px';td2.style.textAlign='center';td2.innerText='序号';
        var td3 = document.createElement('td');td3.style.width='20%';td3.style.border='#cccccc solid 1px';td3.style.borderLeft='none';td3.style.textAlign='center';td3.innerText='文件名称';
        var td4 = document.createElement('td');td4.style.width='20%';td4.style.border='#cccccc solid 1px';td4.style.borderLeft='none';td4.style.textAlign='center';td4.innerText='上传时间';
        var td5 = document.createElement('td');td5.style.width='20%';td5.style.border='#cccccc solid 1px';td5.style.borderLeft='none';td5.style.textAlign='center';td5.innerText='上传人员';
        var td6 = document.createElement('td');td6.style.width='20%';td6.style.border='#cccccc solid 1px';td6.style.borderLeft='none';td6.style.textAlign='center';td6.innerText='文件大小';
        var td7 = document.createElement('td');td7.style.width='15%';td7.style.border='#cccccc solid 1px';td7.style.borderLeft='none';td7.style.textAlign='center';td7.innerText='操作';
        var span = document.createElement('div');span.innerHTML='<img onclick="remove_time_adress(this)" src="../../static/jqueryjsPlumb/images/remove.png" style="width: 20px;height: 20px;cursor: pointer;">';span.style.position='absolute';span.style.zIndex='100';
        span.style.right="-30px";span.style.top="25px";span.className='remove_img';
        td1.appendChild(p_tag);td1.appendChild(a_tag);tr1.appendChild(td1);party_main.appendChild(tr1);
        tr2.appendChild(td2);tr2.appendChild(td3);tr2.appendChild(td4);tr2.appendChild(td5);tr2.appendChild(td6);tr2.appendChild(td7);party_main.appendChild(tr2);party_main.appendChild(span);table_label.appendChild(party_main);
    }

    function create_Division() {
        var table_label = document.getElementById("table_detail");
        var tr = document.createElement('tr');tr.style.width='100%';tr.style.position='relative';
        var td2 = document.createElement('td');td2.className='label_value1';td2.style.width='100%';td2.colSpan='4';td2.style.background='#E8E8E8';td2.style.paddingLeft='1%';td2.contentEditable='true';td2.style.borderTop='none';
        var span = document.createElement('div');span.innerHTML='<img onclick="remove_time_adress(this)" src="../../static/jqueryjsPlumb/images/remove.png" style="width: 20px;height: 20px;margin-left: 10px;margin-top: 7.5px;cursor: pointer;">';span.style.position='absolute';span.style.zIndex='100';
        span.className='remove_img';
        tr.appendChild(td2);tr.appendChild(span);table_label.appendChild(tr);
    }

    function create_essential() {
        var table_label = document.getElementById("table_essential");
        var table = document.createElement('table');table.style.width='100%';table.style.position='relative';
        var tr = document.createElement('tr');tr.style.width='100%';
        var td1 = document.createElement('td');td1.className='label_value1';td1.style.width='100%';td1.colSpan='4';td1.style.background='#E8E8E8';td1.style.paddingLeft='1%';td1.style.borderTop='none';td1.innerText='基本信息';
        var tr1 = document.createElement('tr');tr1.style.width='100%';
        var td2 = document.createElement('td');td2.className='label_title1';td2.contentEditable='true';td2.innerText='姓名';
        var td3 = document.createElement('td');td3.className='label_value1';td3.id='real_name';
        var td4 = document.createElement('td');td4.className='label_title1';td4.contentEditable='true';td4.innerText='所属科室';
        var td5 = document.createElement('td');td5.className='label_value1';td5.id='department';

        var span = document.createElement('div');span.innerHTML='<img onclick="remove_time_adress(this)" src="../../static/jqueryjsPlumb/images/remove.png" style="width: 20px;height: 20px;cursor: pointer;">';span.style.position='absolute';span.style.zIndex='100';
        span.style.right="-30px";span.style.top="25px";span.className='remove_img';

        tr.appendChild(td1);tr1.appendChild(td2);tr1.appendChild(td3);tr1.appendChild(td4);tr1.appendChild(td5);
        table.appendChild(tr);table.appendChild(tr1);table.appendChild(span);table_label.appendChild(table);
    }

    function department_selection() {
        var table_label = document.getElementById("table_detail");
        var tr = document.createElement('tr');tr.style.width='100%';tr.style.position='relative';
        var td1 = document.createElement('td');td1.className='label_title';td1.contentEditable='true';td1.style.borderTop='none';
        var td2 = document.createElement('td');td2.className='label_value';td2.style.width='85%';td2.colSpan='3';td2.style.borderTop='none';td2.style.paddingLeft='1%';
        td2.setAttribute("onclick", "show_office_model('Department')");td2.id='Department';
        var span = document.createElement('div');span.innerHTML='<img onclick="remove_time_adress(this)" src="../../static/jqueryjsPlumb/images/remove.png" style="width: 20px;height: 20px;margin-left: 10px;margin-top: 7.5px;cursor: pointer;">';span.style.position='absolute';span.style.zIndex='100';
        span.className='remove_img';
        tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(span);table_label.appendChild(tr);
     }

    function personnel_selection() {
        var table_label = document.getElementById("table_detail");
        var tr = document.createElement('tr');tr.style.width='100%';tr.style.position='relative';
        var td1 = document.createElement('td');td1.className='label_title';td1.contentEditable='true';td1.style.borderTop='none';
        var td2 = document.createElement('td');td2.className='label_value';td2.style.width='85%';td2.colSpan='3';td2.style.borderTop='none';td2.style.paddingLeft='1%';
        td2.setAttribute("onclick", "model_line_with_parameters('SelectPersonnel')");td2.id='SelectPersonnel';
        var span = document.createElement('div');span.innerHTML='<img onclick="remove_time_adress(this)" src="../../static/jqueryjsPlumb/images/remove.png" style="width: 20px;height: 20px;margin-left: 10px;margin-top: 7.5px;cursor: pointer;">';span.style.position='absolute';span.style.zIndex='100';
        span.className='remove_img';
        tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(span);table_label.appendChild(tr);
    }

    function MultiColumnTimeSelector() {
        var table_label = document.getElementById("table_detail");
        var label_count = document.getElementsByClassName('label_value label_time').length;
        var tr = document.createElement('tr');tr.style.width='100%';tr.style.position='relative';
        var td1 = document.createElement('td');td1.className='label_title';td1.contentEditable='true';td1.style.borderTop='none';td1.innerText='开始时间';
        var td2 = document.createElement('td');td2.className='label_value label_time';td2.style.borderTop='none';td2.id='time_'+String(label_count+1);
        var td3 = document.createElement('td');td3.className='label_title';td3.contentEditable='true';td3.style.borderTop='none';td3.innerText='结束时间';
        var td4 = document.createElement('td');td4.className='label_value label_time';td4.style.borderTop='none';td4.id='time_'+String(label_count+2);
        var span = document.createElement('div');span.innerHTML='<img onclick="remove_time_adress(this)" src="../../static/jqueryjsPlumb/images/remove.png" style="width: 20px;height: 20px;margin-left: 10px;margin-top: 7.5px;cursor: pointer;">';span.style.position='absolute';span.style.zIndex='100';
        span.className='remove_img';
        tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);tr.appendChild(td4);tr.appendChild(span);table_label.appendChild(tr);

        lay('#version').html('-v' + laydate.v);

        //执行一个laydate实例
        laydate.render({
            elem: '#time_'+String(label_count+1), //指定元素
            type: 'date',
            format: 'yyyy-MM-dd'
        });
        laydate.render({
            elem: '#time_'+String(label_count+2), //指定元素
            type: 'date',
            format: 'yyyy-MM-dd'
        });
    }

    function SingleColumnTimeSelector() {
        var table_label = document.getElementById("table_detail");
        var label_count = document.getElementsByClassName('label_value label_time').length;
        var tr = document.createElement('tr');tr.style.width='100%';tr.style.position='relative';
        var td1 = document.createElement('td');td1.className='label_title';td1.contentEditable='true';td1.style.borderTop='none';td1.innerText='开始时间';
        var td2 = document.createElement('td');td2.className='label_value label_time';td2.style.borderTop='none';td2.colSpan='3';td2.style.width='85%';td2.id='time_'+String(label_count+1);
        var span = document.createElement('div');span.innerHTML='<img onclick="remove_time_adress(this)" src="../../static/jqueryjsPlumb/images/remove.png" style="width: 20px;height: 20px;margin-left: 10px;margin-top: 7.5px;cursor: pointer;">';span.style.position='absolute';span.style.zIndex='100';
        span.className='remove_img';
        tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(span);table_label.appendChild(tr);

        lay('#version').html('-v' + laydate.v);

        //执行一个laydate实例
        laydate.render({
            elem: '#time_'+String(label_count+1), //指定元素
            type: 'date',
            format: 'yyyy-MM-dd'
        });
    }

    function CreateMultilineText() {
        var table_label = document.getElementById("table_detail");
        var multiline_count = document.getElementsByName('multiline').length+1;
        var tr = document.createElement('tr');tr.style.width='100%';tr.style.position='relative';
        var td1 = document.createElement('td');td1.className='label_title';td1.contentEditable='true';td1.style.borderTop='none';td1.style.lineHeight='auto';
        var td2 = document.createElement('td');td2.className='label_value';td2.style.borderTop='none';td2.colSpan='3';td2.style.width='85%';td2.style.paddingLeft='1%';td2.name='multiline';td2.id=multiline_count;
        var span = document.createElement('div');span.innerHTML='<img onclick="remove_time_adress(this)" src="../../static/jqueryjsPlumb/images/remove.png" style="width: 20px;height: 20px;margin-left: 10px;margin-top: 7.5px;cursor: pointer;">';span.style.position='absolute';span.style.zIndex='100';
        span.className='remove_img';
        tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(span);table_label.appendChild(tr);
        document.getElementById('bac').setAttribute("onchange", 'change_hight("'+multiline_count+'")')
    }

    let title1 = document.querySelector("#title");
    let addForm1 = document.querySelector("#addForm1");
    title1.addEventListener("mousedown", function (e) {
        let x = e.pageX - addForm1.offsetLeft;
        let y = e.pageY - addForm1.offsetTop;


        document.addEventListener("mousemove", move);
        function move(e) {
            addForm1.style.left = e.pageX - x + 'px';
            addForm1.style.top = e.pageY - y + 'px';
        }

        document.addEventListener("mouseup", function (e) {
            document.removeEventListener("mousemove", move);
        })
    });

    function change_hight(this_) {
        document.getElementById(this_).style.height=String(document.getElementById('bac').value)+"px";
    }

    function IdentifyPersonnel(obj_id) {
         var prople_list = [];
        var selected_personnel_list = document.getElementsByClassName('selected-personnel');
        for (var i=0; i<selected_personnel_list.length; i++) {
            prople_list.push(selected_personnel_list[i].innerText)
        }
        document.getElementById(obj_id).innerText = prople_list.join();
        close_model()
    }

    function scrollConversationScreen() {
        $('#selected-div').scrollTop($('#selected-div')[0].scrollHeight);
    }

    function summit_dep_val(dep_td_id) {
        var processed_prople = document.getElementsByClassName("selected-department");
        if (processed_prople.length === 0){
            alert("请选择拟稿科室！");
            return false
         }
        var dep_list=[];
        for (var i=0; i<processed_prople.length; i++) {
            dep_list.push(processed_prople[i].innerText)
        }
        document.getElementById(dep_td_id).innerText=dep_list.join();
        close_office_models();
    }

    function search_dep() {
        var company_list = {{ company_list | safe }};
        var search_keyword = document.getElementById("search_data1").value;
        var processed = document.getElementById("processed");
        processed.innerHTML = "";
        for (var h=0; h<company_list.length; h++){
            if (company_list[h]["name"].indexOf(search_keyword) !== -1){
                console.log(company_list[h]["name"])
                var div_tag = document.createElement("div");div_tag.className="div_clase";
                div_tag.innerHTML = '<input class="check_box1" id="dep-'+company_list[h]["id"]+'" type="checkbox" onclick="check_dep_ff(\''+company_list[h]["name"]+'\', \''+company_list[h]["id"]+'\', false)"> '+ company_list[h]["name"];
                processed.appendChild(div_tag)
            }
        }
    }
    
    function create_select_label() {
        var select_input_list = document.getElementsByName('select-input');
        var select_html_start = `
            <tr style="width: 100%; position: relative;">
                <td class="label_title" contenteditable="true" style="border-top: none;"></td>
                <td class="label_value"  colspan="3" style="width: 85%; border-top: none;">
        `

        var select_html_end = `
            </td>
                <div class="remove_img" style="position: absolute; z-index: 100;">
                    <img onclick="remove_time_adress(this)" src="../../static/jqueryjsPlumb/images/remove.png" style="width: 20px;height: 20px;margin-left: 10px;margin-top: 7.5px;cursor: pointer;">
                </div>
            </tr>
        `

        var select_tag_start = `
            <select name="" id="" style="width: 98%;height: 100%;border: none;outline: none;">
        `
        for (var i=0; i<select_input_list.length; i++) {
            if (select_input_list[i].value) {
                var option_tag = `
                    <option value="`+select_input_list[i].value+`">`+select_input_list[i].value+`</option>
                `
                select_tag_start += option_tag
            }
        }

        var end_html = select_html_start + select_tag_start + "</select>" + select_html_end
        $("#table_detail").append(end_html);
        document.getElementById('select_setting').style.display = 'none';
    }

    function create_checked_label() {
        var checked_input_list = document.getElementsByName('checked-input');
        var choose_checkbox_count = document.getElementsByName('choose_checkbox').length + 1;
        var checked_html_start = `
            <tr style="width: 100%; position: relative;">
                <td class="label_title" contenteditable="true" style="border-top: none;"></td>
                <td class="label_value choose_checkbox_`+choose_checkbox_count+`" name="choose_checkbox" colspan="3" style="width: 85%; border-top: none;padding-left: 0.5%;">
        `

        var checked_html_end = `
            </td>
                <div class="remove_img" style="position: absolute; z-index: 100;">
                    <img onclick="remove_time_adress(this)" src="../../static/jqueryjsPlumb/images/remove.png" style="width: 20px;height: 20px;margin-left: 10px;margin-top: 7.5px;cursor: pointer;">
                </div>
            </tr>
        `

        for (var i=0; i<checked_input_list.length; i++) {
            if (checked_input_list[i].value) {
                if (i === 0) {
                    var option_tag = `
                        <input type="checkbox" value="`+checked_input_list[i].value+`"> `+checked_input_list[i].value+`
                    `
                }else {
                    option_tag = `
                        <input type="checkbox" style="margin-left: 10px;" value="`+checked_input_list[i].value+`"> `+checked_input_list[i].value+`
                    `
                }

                checked_html_start += option_tag
            }
        }

        var end_html = checked_html_start + checked_html_end
        $("#table_detail").append(end_html);
        document.getElementById('checked_setting').style.display = 'none';
    }

    function inblock_select() {
        document.getElementById("select_setting").style.display = "block";
    }

    function inblock_checked() {
        document.getElementById("checked_setting").style.display = "block";
    }

    function add_select_tag() {
        var input_html = `
            <input type="text" name="select-input" style="width: 100%;height: 30px;border: #cfcfcf solid 1px;border-radius: 3px;margin-top: 5px;padding-left: 2px;">
        `
        $("#select_count").append(input_html)
    }

    function add_checked_tag() {
        var checked_html = `
            <input type="text" name="checked-input" style="width: 100%;height: 30px;border: #cfcfcf solid 1px;border-radius: 3px;margin-top: 5px;padding-left: 2px;">
        `
        $("#checked_count").append(checked_html)
    }

    function process_creation(this_tag, ele_id, process_types) {
        document.getElementById('process_select').style.display = 'table-row';
        var company_list = {{ company_list | safe }};
        var role_obj = {{ role_obj | safe }};
        document.getElementById("right_type_one").innerHTML = '';
        document.getElementById("right_type_two").innerHTML = '';
        document.getElementById("right_type_three").innerHTML = '';
        document.getElementById("right_type_four").innerHTML = '';
        var tpye_one_tag = `
            <button onclick="choose_node(1, '`+ele_id+`', this)" style="width: 100px;height: 30px;background: #83a3b3;border: #83a3b3 solid 1px;border-radius: 3px;color: white;">科主任审核</button>
            <button onclick="choose_node(1, '`+ele_id+`', this)" style="width: 100px;height: 30px;background: #83a3b3;border: #83a3b3 solid 1px;border-radius: 3px;color: white;margin-left: 20px;">申请人分管院长</button>
            <button onclick="choose_node(1, '`+ele_id+`', this)" style="width: 100px;height: 30px;background: #83a3b3;border: #83a3b3 solid 1px;border-radius: 3px;color: white;margin-left: 20px;">书记审核</button>
            <button onclick="choose_node(1, '`+ele_id+`', this)" style="width: 100px;height: 30px;background: #83a3b3;border: #83a3b3 solid 1px;border-radius: 3px;color: white;margin-left: 20px;">院长审核</button>
        `
        $("#right_type_one").append(tpye_one_tag)
        for (var i=0; i<company_list.length; i++) {
            var tpye_two_tag = `
                <button onclick="choose_node(2, '`+ele_id+`', this)" style="width: 100px;height: 30px;background: #83a3b3;border: #83a3b3 solid 1px;border-radius: 3px;color: white;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-top: 20px;margin-left: 15px;">`+company_list[i]['name']+`</button>
            `
            $("#right_type_two").append(tpye_two_tag);
        }
        for (var k=0; k<company_list.length; k++) {
            var tpye_three_tag = `
                <button onclick="choose_node(3, '`+ele_id+`', this)" style="width: 100px;height: 30px;background: #83a3b3;border: #83a3b3 solid 1px;border-radius: 3px;color: white;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-top: 20px;margin-left: 15px;">`+company_list[k]['name']+`</button>
            `
            $("#right_type_three").append(tpye_three_tag);
        }
        for (var j=0; j<role_obj.length; j++) {
            var tpye_four_tag = `
                <button onclick="choose_node(4, '`+ele_id+`', this)" style="width: 100px;height: 30px;margin-left: 15px;background: #83a3b3;border: #83a3b3 solid 1px;border-radius: 3px;color: white;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-top: 20px;">`+role_obj[j]['station']+`</button>
            `
            $("#right_type_four").append(tpye_four_tag);
        }
    }

    function choose_node(choose_type, ele_id, this_ele) {
        if (choose_type === 3) {
            document.getElementById(ele_id).innerText = this_ele.innerText + "分管院长";
        }else {
            document.getElementById(ele_id).innerText = this_ele.innerText;
        }

        document.getElementById(ele_id).setAttribute('title', choose_type);
        document.getElementById('process_select').style.display = 'none';
    }

    (function ($) {
        $.fn.MySelect = function () {
            this.each(function () {
                var $box = $(this);
                var $input = $box.find("input.my-select-input");  //输入框
                var $list = $input.next();                          //ul装扮成下拉框
                var inputHeight = $input.outerHeight();   //计算input输入框的高度和宽度，方便定位ul和设置ul及包裹元素的宽度
                //var inputWidth=$input.innerWidth();
                $list.css({"top": (inputHeight)});
                //$box.width($input.outerWidth());

                $input.focus(function () {   //输入框获得焦点后，显示下拉选择ul
                    var $nextUl = $(this).next();
                    if ($nextUl.children().length > 0) {
                        $(this).next().show();
                    }
                }).bind('input propertychange', function () {  //绑定监测输入框的输入值更改
                    var $this = $(this);
                    $this.attr("data-id", "");
                    var curText = $this.val();
                    var $nextUl = $(this).next();
                    if ($nextUl.children().length > 0) {
                        $nextUl.find("li").removeClass("choosed");
                        $nextUl.find("li").each(function (i, item) {
                            var txt = $(item).text();
                            if (txt === curText) {
                                var v = $(item).attr("data-value");
                                $this.attr("data-id", v);
                                $(item).addClass("choosed");
                            }
                        });
                    }
                });
                $list.off('click', 'li').on('click', 'li', function (e) {
                    var $this = $(this);
                    var value = $this.attr("data-value") || '';
                    $input.val($this.text()).attr("data-id", value);
                    $this.addClass("choosed").siblings().removeClass("choosed");
                    $this.parent().hide();
                });
            });

            $(document).click(function (e) {  //点击.my-select-box范围外时隐藏ul下拉框
                var target = e.target;
                var $target = $(target);
                var $parent = $target.closest('.my-select-box');
                if ($parent.length < 1) {  //说明不是.my-select-box范围内点击，将ul隐藏
                    $(".my-select-list").hide();
                } else if ($parent.length == 1) {  //如果存在多个my-select-box的情况，将其余的非这项以外的都隐藏
                    var $ul = $parent.find(".my-select-list");
                    var flag = $ul.is(":hidden");
                    $(".my-select-list").hide();
                    if (!flag) $ul.show();
                }
            });
            return this;
        }
    })(jQuery);

    $(".my-select-box").MySelect();

</script>
</body>

</html>
